<template>
  <div class="guess-you-like-wrapper">
    <div class="recommend-title">
      <!-- <span class="iconfont icon-heart">&#xe85c;</span> -->
      <span class="title-text">周末去哪儿</span>
    </div>
    <ul>
      <!-- 只要没有数据会改变的或是有打乱li的, 那么key可以尝试用index -->
      <!-- vue里面的data或props里面变量和这个文件里面用var声明的变量不影响的, vue命令里面的变量不会去找文件里面var,let,const这种声明变量的 -->
      <li class="list-item" v-for="item of weekendList" :key="item.id">
        <div class="item-img-box">
          <img class="item-img" :src="item.imgUrl" alt="" />
        </div> 
        <div class="item-info">
          <div class="info-title">{{item.title}}</div>
          <div class="info-comment">
            {{ item.comment }}
          </div>
        </div>
      </li>
    </ul>
  </div>
  
</template>

<script>

export default {
  name: 'HomeWeekGoWhere',
  props: {
    weekendList: [Array],
  },
  data: function() {
    return {
      
    }
  }
}

</script>

<style lang="stylus" scoped>
// stylus也能语法嵌套... 写到后面才发现... , 以后都用类嵌套了
@import '~@styles/variables.styl';
@import '~@styles/mixins.styl';

  div {
    box-sizing: border-box;
  }

  .recommend-title { 
    width: 100%;
    height: .8rem;
    padding: 0 .1rem
    background-color: #999;
    line-height: .8rem;
    font-size: .32rem;
  }

  .list-item {
    // display: flex;
    // height: 2.4rem;
    // background-color: orange;
  }

  .list-item .item-img-box {
    // float: left;
    // position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 37.1%;
    // background-color: green;
    // padding: .2rem;

    // 自己项目里面的"静态文件"和"网络里传过来的文件" img高度实际渲染不一样,
    // 如果高度用动态渲染, 那么宽高比例按照实际图片的宽高比例来计算的
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .list-item .item-info {
    // flex: 1;
    // float: left;
    // width: 100%;
    height: 1.5rem;
    padding: 0 .2rem .3rem;
    color: $drakTxtColor;
    box-sizing: border-box;


    .info-title {
      width: 100%;
      height: .5rem;
      font-size: .32rem;
      line-height: .5rem;
      ellipsis();
    }

    .info-comment {
      line-height: .34rem;
    }
  }

  // .list-item .item-info 

</style>